[CSS] nth-of-type() 그리고 nth-last-of-type() 선택자 알아보기

CSS의 선택자 :nth-of-type() 그리고 :nth-last-of-type()에 대하여 자세히 알아봅니다.

위 두 가지 CSS는 모두 선택자 속성입니다. 특정 엘리먼트 요소를 선택할 때 사용하며 사실 많이 사용되는 선택자 속성은 아닙니다. (nth-child, first-child, last-child 등이 많이 사용됨)

하지만 정해진 순서에 따라 규칙적으로 스타일을 적용하는 경우 nth-of-type()을 사용하면 매우 쉽고 빠르게 스타일을 정의할 수 있습니다. 왜냐하면 nth-of-type()은 부모를 기준으로 하지 않고 자신이 속한 형제 요소로 규칙을 정의하기 때문입니다.

그럼 아래는 이 두 선택자에 대하여 좀 더 자세히 알아보도록 하겠습니다. 이 둘은 어떤 차이점이 있고 어떻게 사용해야 할까요? 먼저 nth-of-type() 부터 알아봅니다.

# :nth-of-type() 알아보기

먼저 간단한 문법부터 알아봅니다. nth-of-type()은 아래와 같이 사용합니다.

element:nth-of-type(value) { 정의할 스타일 }

위와 같이 선택할 요소에 :nth-of-type()을 사용하면 됩니다.
여기서 값의 n 또는 n을 사용한 수식이 사용됩니다. 예를들어 2n + 1은 두 번째 다음 요소에 모두 스타일을 적용하게 됩니다.

값으로 n이나 1, 2, 3 등의 위치를 값으로 사용합니다. 또한 odd, even처럼 홀 수, 짝 수 번째를 선택할 수도 있습니다.

매우 간단하죠. 그러면 간단하게 예를 들어보겠습니다.


@ 3번째 태그만 폰트색 변경하기
만약 아래의 태그에서 p 태그의 3번째 태그만 폰트색을 빨간색으로 변경하려면 어떻게 할까요?

아래와 같이 nth-of-type()를 div p 태그에 적용하면 됩니다.

이처럼 사용방법은 매우 간단합니다. 실제로 위 코드를 적용하면 아래와 같이 나타나게 됩니다.

이처럼 자신의 형제 요소를 기준으로 찾을 때는 :nth-of-type()을 기억하세요.

! nth-child()와의 차이점은?

nth-child()는 더 많이 사용되는 속성입니다. 가장 큰 이유로 더 먼저 사용되어 왔고 호환성도 높기 때문입니다. 하지만 자신이 몇 번째에 해당하는지 위치뿐만 아니라 이웃한 형제 요소까지 선택자 조건에 맞아야하는 제약이 있습니다. 즉 중간에 다른 태그 요소를 사용하는 경우 nth-child()가 적용되지 않게 됩니다.

# CSS :nth-last-of-type() 알아보기

이번에는 CSS 속성 :nth-last-of-type()을 알아봅니다. 이 선택자 속성은 :nth-of-type()과 거의 동일하며 아주 작은 차이만 있습니다. 바로 찾는 시작점이 다릅니다. nth-of-type()은 위에서부터 찾지만 nth-last-of-type()은 아래서부터(뒤에서부터) 찾습니다.

쉽게 생각하면 nth-last-of-type()은 nth-of-type()을 거꾸로 사용하는 것과 동일하게 적용할 수 있겠습니다. 그럼 위의 예제와 동일하게 구현하려면? 이 경우 아래와 같이 css를 정의해야 합니다.


만약 위와 동일한 태그가 있고 동일하게 세번째 요소를 색을 부여한다면 이는 곧 뒤에서부터 첫번째 요소에 해당하므로 아래와 같이 사용할 수 있습니다.

실제로 구현했을때 어떻게 나타나는지 알아보겠습니다.


첫 번째 예제처럼 동일하게 나타나는 것을 보실 수 있습니다. 여기까지 nth-of-type()과 nth-last-of-type()을 알아보았습니다.